<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>websocket 客户端</title>
</head>

<link rel="stylesheet" href="../../static/libs/layui/css/layui.css" th:href="@{/libs/layui/css/layui.css}">
<body>

<div>
    <div>
        <button id="connect" class="layui-btn layui-btn-sm">建立连接</button>
        <button id="disconnect" class="layui-btn layui-btn-sm layui-btn-danger">断开连接</button>
    </div>

    <div id="conversationDiv" style="margin-top: 30px;">
        <div class="layui-inline">
            <div class="layui-input-inline" style="width: 300px;">
                <input type="text" id="content" class="layui-input"/>
            </div>
            <button id="sendMessage" class="layui-btn  layui-btn-warm">发送消息</button>
            <button id="cleanMessage" class="layui-btn  layui-btn-danger">清空消息区</button>
        </div>

        <div style="margin-top: 20px;">
            <h2>消息区</h2>
            <hr>
            <div id="response"></div>
        </div>
    </div>
</div>

<script src="../../static/libs/layui/layui.js" th:src="@{/libs/layui/layui.js}"></script>
<script src="../../static/js/sockjs.min.js" th:src="@{/js/sockjs.min.js}"></script>
<script src="../../static/js/stomp.min.js" th:src="@{/js/stomp.min.js}"></script>

<script type="text/javascript">
    /*  群聊  */
    layui.use(['jquery', 'layer'], function () {
        var $ = layui.jquery,
            layer = layui.layer;
        var stompClient = null;
        var isConnected = false;

        // 建立连接
        function connect() {
            var socket = new SockJS('/groupChat');
            stompClient = Stomp.over(socket);
            stompClient.connect({username: 'zhangsan', age: 17}, function (frame) {
                console.log('Connected:' + frame);
                isConnected = true;
                // 订阅频道
                stompClient.subscribe('/topic/groupChat', function (response) {
                    showResponseMessage(response.body);
                });
            });
        }

        // 断开链接
        function disconnect() {
            if (stompClient != null) {
                isConnected = false;
                stompClient.disconnect();
            }
            console.log('Disconnected');
        }

        // 点击开启连接
        $('#connect').click(function () {
            connect();
        });

        // 点击关闭连接
        $('#disconnect').click(function () {
            disconnect();
        });

        // 点击发送消息
        $('#sendMessage').click(function () {
            if (!isConnected) {
                layer.msg('请先建立连接');
                return;
            }
            var content = $('#content').val();
            if (content === '') {
                layer.msg('发送内容不能为空');
                return;
            }
            stompClient.send("/app/groupChat", {}, content);
        });

        // 清空消息区
        $('#cleanMessage').click(function () {
            $("#response").html('');
        });

        // 显示服务端响应消息
        function showResponseMessage(message) {
            var responseMessage = '<p style="margin-top:10px;">' + message + '</p>';
            $("#response").append(responseMessage);
        }
    });
</script>

</body>
</html>